// import React, {PureComponent} from 'react'
// import {
//   Card,
//   Icon,
//   Form,
//   Input,
//   Button,
//   message
// } from 'antd'
//
// import PicturesWall from './pictures-wall'
// import LinkButton from '../../components/link-button'
// import { reqAddOrUpdateBanner} from '../../api'
//
// const {Item} = Form
// const { TextArea } = Input
//
// /*
// Product的添加和更新的子路由组件
//  */
// class BannerAddUpdate extends PureComponent {
//
//   state = {
//     options: [],
//   }
//
//   constructor (props) {
//     super(props)
//
//     // 创建用来保存ref标识的标签对象的容器
//     this.pw = React.createRef()
//     this.editor = React.createRef()
//   }
//   submit = () => {
//     // 进行表单验证, 如果通过了, 才发送请求
//     this.props.form.validateFields(async (error, values) => {
//       if (!error) {
//
//         // 1. 收集数据, 并封装成product对象
//         const {link} = values
//
//         const imgs = this.pw.current.getImgs()
//         // const detail = this.editor.current.getDetail()
//
//         const banner = {link,imgs}
//
//         // 如果是更新, 需要添加_id
//         if(this.isUpdate) {
//           banner._id = this.banner._id
//         }
//
//         // 2. 调用接口请求函数去添加/更新
//         const result = await reqAddOrUpdateBanner(banner)
//
//         // 3. 根据结果提示
//         if (result.status===0) {
//           message.success(`${this.isUpdate ? '更新' : '添加'}轮播成功!`)
//           this.props.history.goBack()
//         } else {
//           message.error(`${this.isUpdate ? '更新' : '添加'}轮播失败!`)
//         }
//       }
//     })
//   }
//
//
//   componentWillMount () {
//     // 取出携带的state
//     const banner = this.props.location.state  // 如果是添加没值, 否则有值
//     // 保存是否是更新的标识
//     this.isUpdate = !!banner
//     // 保存商品(如果没有, 保存是{})
//     this.banner = banner || {}
//   }
//
//   render() {
//     // const {link,img} = this.props.location.state.banner
//     const {isUpdate, banner} = this
//     const { imgs, detail} = banner
//     // 指定Item布局的配置对象
//     const formItemLayout = {
//       labelCol: { span: 2 },  // 左侧label的宽度
//       wrapperCol: { span: 8 }, // 右侧包裹的宽度
//     }
//
//     // 头部左侧标题
//     const title = (
//       <span>
//         <LinkButton onClick={() => this.props.history.goBack()}>
//           <Icon type='arrow-left' style={{fontSize: 20}}/>
//         </LinkButton>
//         <span>{isUpdate ? '修改轮播' : '添加轮播'}</span>
//       </span>
//     )
//
//     const {getFieldDecorator} = this.props.form
//
//     return (
//       <Card title={title}>
//         <Form {...formItemLayout}>
//           <Item label="轮播链接">
//             {
//               getFieldDecorator('link', {
//                 initialValue: banner.link,
//                 rules: [
//                   {required: true, message: '必须输入轮播链接'}
//                 ]
//               })(<Input placeholder='请输入轮播链接'/>)
//             }
//           </Item>
//
//           <Item label="轮播图片">
//             <PicturesWall ref={this.pw} imgs={imgs}/>
//           </Item>
//           <Item>
//             <Button type='primary' onClick={this.submit}>提交</Button>
//           </Item>
//         </Form>
//       </Card>
//     )
//   }
// }
//
// export default Form.create()(BannerAddUpdate)
//
//
// /*
// 1. 子组件调用父组件的方法: 将父组件的方法以函数属性的形式传递给子组件, 子组件就可以调用
// 2. 父组件调用子组件的方法: 在父组件中通过ref得到子组件标签对象(也就是组件对象), 调用其方法
//  */
//
// /*
// 使用ref
// 1. 创建ref容器: thi.pw = React.createRef()
// 2. 将ref容器交给需要获取的标签元素: <PictureWall ref={this.pw} />
// 3. 通过ref容器读取标签元素: this.pw.current
//  */
